<template>
    <div>
        <div id="container" style="height: 80vh"></div>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";

    export default {
        name: "WordMap",
        data() {
            return {
                // 地图实例
                map: null,
                // 标记点
                marker: "",
                // 位置信息
                form: {
                    lng: "",
                    lat: "",
                    address: "",
                    //地区编码
                    adcode: "",
                },
            };
        },
        mounted() {
            this.loadmap();
        },
        methods: {
            loadmap() {
                return new Promise((reslove, reject) => {
                    AMapLoader.load({
                        key: "6dc50444c8e2aa9b5ab6ee35f31589a4", // 申请好的Web端开发者Key，首次调用 load 时必填
                        // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                        AMapUI: {
                            // 是否加载 AMapUI，缺省不加载
                            version: "1.1", // AMapUI 缺省 1.1
                            plugins: [] // 需要加载的 AMapUI ui插件
                        }
                    }).then(AMap => {
                        this.map = new AMap.Map("container", {
                            //resizeEnable: true,
                            viewMode: "3D", //是否为3D地图模式
                            zoom: 5, //初始化地图级别
                            center: [113.594964, 34.799953] //中心点坐标 116.397428, 39.90923
                        });
                        //地图控件
                        this.map.addControl(new AMap.Scale());
                        this.map.addControl(new AMap.ToolBar());
                        this.map.setZoom(14); //设置缩放大小

                        //this.handlePoint();
                        //点击获取经纬度;
                        this.map.on("click", (e) => {
                            // 获取经纬度
                            this.form.lng = e.lnglat.lng;
                            this.form.lat = e.lnglat.lat;
                            // 清除点
                            this.removeMarker();
                            // 标记点
                            this.setMapMarker();
                            console.log(this.form)
                        });
                        // 初始化位置
                        this.initAddress()
                        reslove();
                    }).catch(e => {
                        console.log(e, "高德地图加载失败");
                        reject(e);
                    });
                });
            },
            // 标记点
            setMapMarker() {
                // 自动适应显示想显示的范围区域
                this.map.setFitView();
                this.marker = new AMap.Marker({
                    map: this.map,
                    position: [this.form.lng, this.form.lat],
                });
                this.map.setFitView();
                this.map.add(this.marker);
            },
            // 清除点
            removeMarker() {
                if (this.marker) {
                    this.map.remove(this.marker);
                }
            },
            // 初始化默认位置
            initAddress(){
                let marker = new AMap.Marker({
                    position: new AMap.LngLat( 117.19076, 31.83171), //参数为经纬度
                    content: '<div style="color: #fff; width: 500px;"><img src="https://vdata.amap.com/icons/b18/1/2.png" />asdf</div>'
                })
                this.map.clearMap()// 清除所有覆盖物（点标志）
                this.map.add(marker)// 添加点标志
                this.showInfoWindow(marker)
            },
            //自定义信息窗体
            showInfoWindow(marker) {
                let infoWindow = new AMap.InfoWindow({
                    isCustom: true, //是否自定义信息窗体
                    content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.address}</div>`,
                    closeWhenClickMap: true,
                    zIndex: 999,
                    offset: new AMap.Pixel(16, -35)
                });
                infoWindow.open(this.map, marker.getPosition());
            },
            handlePoint() {
                AMapUI.load(["ui/misc/PointSimplifier"], (PointSimplifier, $) => {
                    if (!PointSimplifier.supportCanvas) {
                        alert("当前环境不支持 Canvas！");
                        return;
                    }
                    var pointSimplifierIns = new PointSimplifier({
                        map: this.map, //所属的地图实例
                        getPosition: (item) => {
                            if (!item) {
                                return null;
                            }
                            var parts = item.split(",");
                            //返回经纬度
                            return [parseFloat(parts[0]), parseFloat(parts[1])];
                            // return item;
                        },
                        getHoverTitle: (dataItem, idx) => {
                            return idx + ": " + dataItem;
                        },
                        renderOptions: {
                            //点的样式
                            pointStyle: {
                                content: "custom_path",
                                width: 60,
                                height: 60,
                                fillStyle: "rgba(153, 0, 153, 1)",
                            },
                            //鼠标hover时的title信息
                            hoverTitleStyle: {
                                position: "top"
                            }
                        }
                    });
                    window.pointSimplifierIns = pointSimplifierIns;
                    //this.$http.post("后端接口", {
                        //传递的参数配置 117.19076, 31.83171
                    //}).then((res) => {
                        // 测试数据
                        const mapData =[
                        '117.19076,31.83171',
                        ]

                        // 接口获取到的数进行处理
                        // 数据格式 const mapData =['经度1,纬度1','经度2,纬度2']
                        //let mapData = [];
                    mapData.forEach(item => {
                        });
                        console.log(mapData, "push数据");
                        pointSimplifierIns.setData(mapData);
                    //}).catch();
                    //  pointMouseover pointMouseout
                    pointSimplifierIns.on("pointClick", (e, record) => {
                        // console.log(e.type, record);
                        console.log(record.data);
                    });
                });
            },
        }
    }
</script>

<style scoped>

</style>
